<template>
  <div ref="chartRef" className="price-chart" :style="{ width: width, height: height }" />
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted, watch } from 'vue';

// 接收父组件传递的参数
const props = defineProps({
  // 图表数据：[{time_point, price_amount}, ...]
  data: {
    type: Array,
    default: () => []
  },
  // 图表标题（如："光电 时段电价趋势"）
  title: {
    type: String,
    default: "时段电价趋势"
  },
  // 图表宽度（默认40%）
  width: {
    type: String,
    default: "50%"
  },
  // 图表高度（默认300px）
  height: {
    type: String,
    default: "300px"
  }
});

// 创建图表引用
const chartRef = ref(null);
// 图表实例
const chartInstance = ref(null);

// 格式化时间（图表专用）
const formatChartTime = (isoTime) => {
  if (!isoTime) return '';
  const date = new Date(isoTime);
  return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
};
// 初始化图表
const initChart = () => {

  // 获取当前组件的DOM元素
  if (!chartRef.value) return;

  // 销毁已有实例
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }

  // 创建新实例
  chartInstance.value = echarts.init(chartRef.value);

  // 设置图表配置
  updateChart();
};

// 更新图表数据
const updateChart = () => {
  const nameMapping = {
    '0': '电价',
    '1': '摄氏度',
    '电价': '电价',
    '2': '相对湿度',
    '3': '风力',
    '4': '光照',
    '5': '用电量',
  }
  const titleMapping = {
    '0': '电价',
    '1': '温度',
    '2': '湿度',
    '3': '风力',
    '4': '光照',
    '5': '用电量',
  }
  const unitMapping = {
    '0': '(元)',
    '1': '(℃)',
    '2': '(%)',
    '3': '(m/s)',
    '4': '(W/m²)',
    '5': '(kWh)',
  }
  if (!chartInstance.value) return;
  console.log(props.title, nameMapping[props.title], '11');
  // 处理数据
  const xAxisData = props.data.map(item => formatChartTime(item.time_point));
  const seriesData = props.data.map(item => item.price_amount || 0);

  // 图表配置
  const option = {
    title: {
      text: titleMapping[props.title] + ' 时段参数变化',
      left: 'center',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const param = params[0];
        const item = props.data[param.dataIndex];
        return `时间：${item.time_point}<br>${nameMapping[props.title]}：${param.value} ${unitMapping[props.title]}`;
      }
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: { rotate: 30, interval: 0 }
    },
    yAxis: { type: 'value', name: nameMapping[props.title]+unitMapping[props.title], min: 0 },
    series: [{
      data: seriesData,
      type: 'line',
      smooth: true,
      markPoint: {
        data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
      }
    }]
  };

  chartInstance.value.setOption(option);
};

// 监听数据变化，自动更新图表
watch(() => props.data, updateChart, { deep: true });

// 初始化图表
onMounted(initChart);

// 窗口大小变化时重绘
onMounted(() => {
  window.addEventListener('resize', () => {
    chartInstance.value?.resize();
  });
});

// 组件销毁时清理图表
onUnmounted(() => {
  if (chartInstance.value) {
    chartInstance.value.dispose();
    chartInstance.value = null;
  }
});
</script>

<style scoped>
.price-chart {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  min-width: 300px;
  /* 避免过窄 */
}
</style>